<template>
  <div class="fillcontain">
    <div class="head-title"> <i class="el-icon-edit-outline">新增流程</i></div>
    <div class="page-content">
      <el-form :model="dataForm"  ref="dataForm" label-width="100px" class="form-container">
        <el-row>
          <el-col :span="12">
            <el-form-item label="流程名称" prop="sceneName">
              <el-input v-model="dataForm.flowName" disabled placeholder="流程名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流程标识" prop="sceneName">
              <el-input v-model="dataForm.flowIdentify" disabled placeholder="流程标识"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
            <el-form-item label="关联模型" prop="">
              <el-checkbox-group v-model="checkEntity" >
                <el-col :span="12" v-for="(entity,index) in entityList" :key="index">
                  <el-checkbox :label="entity.entityId+''" :key="entity.entityId" :disabled="dataList.length>1">{{entity.label}}</el-checkbox>
                </el-col>
              </el-checkbox-group>
            </el-form-item>
        </el-row>

        <el-row>
          <el-col :span="24">
            <el-form-item label="流程说明" prop="remark">
              <el-input type="textarea" :rows="2" disabled v-model="dataForm.remark" placeholder="备注"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>

      <div class="mb10 pl20">
        <el-tabs type="border-card" @tab-click="tabClick">
          <el-tab-pane label="流程图">
  <!--          <el-row class="p10">-->
  <!--            <el-button type="primary" @click="begin()">开始</el-button>-->
  <!--            <el-button type="primary" @click="showNext()">下一步</el-button>-->
  <!--            <el-button type="primary" @click="end()">结束</el-button>-->
  <!--            <el-button type="primary" @click="joinLine()">连接线</el-button>-->
  <!--            <el-button type="primary" @click="reset()">重置</el-button>-->
  <!--          </el-row>-->
            <div id="mountNode"></div>
          </el-tab-pane>
          <el-tab-pane label="流程节点">
            <el-row>
              <el-col :span="12">
                <el-card class="box-card">
                  <div slot="header" class="clearfix">
                    <span>节点列表</span>
                  </div>
                  <div class="temp_content">
                    <el-table
                      :data="dataList"
                      height="800"
                      border
                      style="width: 100%; ">
                      <el-table-column
                        type="index"
                        header-align="center"
                        width="50"
                        label="序号">
                      </el-table-column>
                      <el-table-column
                        prop="flowShapeId"
                        header-align="center"
                        align="center"
                        label="ID">
                      </el-table-column>
                      <el-table-column
                        prop="flowShapeName"
                        header-align="center"
                        align="center"
                        label="名称">
                      </el-table-column>
                      <el-table-column
                        prop="flowNodeType"
                        header-align="center"
                        align="center"
                        label="类型">
                        <template slot-scope="scope">
                          {{scope.row.flowNodeType | typePipe}}
                        </template>
                      </el-table-column>
  <!--                    <el-table-column-->
  <!--                      header-align="center"-->
  <!--                      align="center"-->
  <!--                      label="操作">-->
  <!--                      <template slot-scope="scope">-->
  <!--                        <el-button v-if="scope.row.flowNode != 'root'" type="text" size="small"-->
  <!--                                   @click="editNode(scope.row)">修改-->
  <!--                        </el-button>-->
  <!--                      </template>-->
  <!--                    </el-table-column>-->
                    </el-table>
                  </div>
                </el-card>

              </el-col>
              <el-col :span="12">
                <el-card class="box-card flow-img">
                  <div slot="header" class="clearfix">
                    <span>连接线列表</span>
                  </div>
                  <div class="temp_content">
                    <el-row class="mt10">
                      <el-table
                        :data="circlePointList"
                        height="800"
                        border
                        style="width: 100%; ">
                        <el-table-column
                          type="index"
                          header-align="center"
                          width="50"
                          label="序号">
                        </el-table-column>
                        <el-table-column
                          prop="sourceName"
                          header-align="center"
                          align="center"
                          label="起点">
                        </el-table-column>
                        <el-table-column
                          prop="targetName"
                          header-align="center"
                          align="center"
                          label="终点">
                        </el-table-column>

  <!--                      <el-table-column-->
  <!--                        header-align="center"-->
  <!--                        align="center"-->
  <!--                        label="操作">-->
  <!--                        <template slot-scope="scope">-->
  <!--                          <el-button type="text" size="small" @click="editPoint(scope.row)">修改</el-button>-->
  <!--                        </template>-->
  <!--                      </el-table-column>-->
                      </el-table>
                    </el-row>
                  </div>
                </el-card>
              </el-col>

            </el-row>
          </el-tab-pane>
          <el-tab-pane label="流程源码">
            <!--          <codemirror-->
            <!--            ref="mycode"-->
            <!--            :value="dataForm.flowJava"-->
            <!--            v-model="dataForm.flowJava"-->
            <!--            :options="cmOptions"-->
            <!--            class="code">-->
            <!--          </codemirror>-->
            <el-input  type="textarea" readOnly :rows="30" v-model="dataForm.flowJava" ></el-input>
          </el-tab-pane>
        </el-tabs>
      </div>


      <div class="content-footer">
  <!--      <el-button type="danger" @click="saveInfo()">保存</el-button>-->
        <el-button @click="toList">返回</el-button>
      </div>
    </div>
    


    <el-dialog
      title="节点详情"
      width="60%"
      :close-on-click-modal="false"
      :visible.sync="flowVisible"
      append-to-body>
      <el-form :model="flow" ref="dataForm" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="节点名称" prop="flowShapeName">
              <el-input v-model="flow.flowShapeName" placeholder="名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="节点类型" prop="flowNodeType">
              <el-select v-model="flow.flowNodeType" :disabled="isEditNode" filterable placeholder="请选择">
                <el-option
                  v-for="item in flowTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click.native="changeType(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!--循环-->
        <el-row v-if="flow.flowNodeType==='3'">
          <el-col :span="12">
            <el-form-item label="循环实体" prop="flowShapeX">
              <el-select v-model="flow.entityId" filterable clearable placeholder="实体">
                <el-option
                  v-for="item in curEntityList"
                  :key="item.entityId"
                  :label="item.label"
                  :value="item.entityId"
                  @click.native="getEntityProperties(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="实体属性" prop="flowShapeY">
              <el-select v-model="flow.itemId" filterable clearable placeholder="实体属性">
                <el-option
                  v-for="item in entityItemInfos"
                  :key="item.itemId"
                  :label="item.label"
                  :value="item.itemId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <!--子流程-->
        <el-row v-if="flow.flowNodeType==='6'">
          <el-col :span="12">
            <el-form-item label="子流程" prop="">
              <el-select v-model="flow.childFlowIdentify" filterable clearable  placeholder="执行场景">
                <el-option
                  v-for="item in flows"
                  :key="item.flowIdentify"
                  :label="item.flowName"
                  :value="item.flowIdentify"
                  @click.native="changeChildFlow(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="流程版本" prop="flowShapeX">-->
<!--              <el-select v-model="flow.childFlowVersion" filterable clearable placeholder="流程版本">-->
<!--                <el-option-->
<!--                  v-for="item in flowVersionList"-->
<!--                  :key="item.flowVersion"-->
<!--                  :label="item.flowVersion"-->
<!--                  :value="item.flowVersion">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>

        <!--规则组-->
        <el-row v-if="flow.flowNodeType==='2'">
          <el-col :span="12">
            <el-form-item label="执行规则组" prop="flowShapeX">
              <el-select v-model="flow.groupIdentify" filterable clearable placeholder="执行规则组">
                <el-option
                  v-for="item in groupList"
                  :key="item.groupIdentify"
                  :label="item.groupName"
                  :value="item.groupIdentify"
                  @click.native="getGroupVersion(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
<!--          <el-col :span="12">-->
<!--            <el-form-item label="规则组版本" prop="flowShapeX">-->
<!--              <el-select v-model="flow.groupVersion" filterable clearable placeholder="规则组版本">-->
<!--                <el-option-->
<!--                  v-for="item in sceneVersionList"-->
<!--                  :key="item.groupVersion"-->
<!--                  :label="item.groupVersion"-->
<!--                  :value="item.groupVersion">-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
        </el-row>

        <!--判断-->
        <el-row v-if="flow.flowNodeType==='5'">
          <el-row>
            <el-form-item label="" prop="">
              <el-button @click="addConditions">添加条件</el-button>
            </el-form-item>
          </el-row>

          <el-row v-for="(flowJudge,jindex) in flowJudges" :key="jindex">
            <el-row>
              <el-form-item label="条件类型" prop="">
                <el-col :span="4" class="mr10">
                  <el-select v-model="flowJudge.conditionType" filterable clearable placeholder="请选择">
                    <el-option
                      v-for="item in conditionTyps"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                      @click.native="changeConditionType(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="2" class="mr10" v-if="flowJudge.conditionType=='2'">实体：</el-col>
                <el-col :span="4" class="mr10" v-if="flowJudge.conditionType=='2'">
                  <el-select v-model="flowJudge.entityId" filterable clearable placeholder="请选择">
                    <el-option
                      v-for="item in curEntityList"
                      :key="item.entityId"
                      :label="item.entityName"
                      :value="item.entityId"
                      @click.native="changeEntityItem(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-button type="primary" @click="clear(jindex)">删除</el-button>
                </el-col>
                <el-col :span="4" v-if="flowJudge.showRel">
                  <el-select v-model="flowJudge.conditionRel" filterable clearable placeholder="请选择">
                    <el-option
                      v-for="item in relList"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>

            </el-row>

            <!-- 条件为属性，左右两边都选择属性-->
            <el-row style="padding: 10px 0;" v-if="flowJudge.conditionType=='1'">

              <el-form-item label="实体属性" prop="">
                <el-col :span="4" class="mr10">
                  <el-select v-model="flowJudge.leftEntityId" filterable clearable placeholder="实体">
                    <el-option
                      v-for="item in curEntityList"
                      :key="item.entityId"
                      :label="item.entityName"
                      :value="item.entityId"
                      @click.native="changeLeftEntity(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="flowJudge.leftProperty" filterable clearable placeholder="实体属性">
                    <el-option
                      v-for="item in leftEntityItemInfos"
                      :key="item.itemId"
                      :label="item.label"
                      :value="item.itemId"
                      @click.native="changeLeftPro(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="flowJudge.sysbol" filterable clearable placeholder="比较符">
                    <el-option
                      v-for="item in sysbols"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4" class="mr10">
                  <el-select v-model="flowJudge.rightEntityId" filterable clearable placeholder="实体">
                    <el-option
                      v-for="item in curEntityList"
                      :key="item.entityId"
                      :label="item.entityName"
                      :value="item.entityId"
                      @click.native="changeRightEntity(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="flowJudge.rightProperty" filterable clearable placeholder="实体属性">
                    <el-option
                      v-for="item in rightEntityItemInfos"
                      :key="item.itemId"
                      :label="item.label"
                      :value="item.itemId">
                    </el-option>
                  </el-select>
                </el-col>
              </el-form-item>


            </el-row>

            <!-- 条件为方法，左边选择属性，右边可输入值，或选择枚举值-->
            <el-row style="padding: 10px 0;" v-if="flowJudge.conditionType=='2'">
              <el-row>
                <el-col :span="4" class="mr10" v-for="(m,index) in methodList" :key="index">
                  <span @click="insertM(m,jindex)" class="btn-span">{{m.className}}</span>
                </el-col>
              </el-row>
              <el-row v-if="showParams" style="padding: 10px 0;">
                <el-col :span="6" v-for="(p,index) in methodParams" :key="index">
                  <el-col :span="8">
                    <span>{{p.desc}}</span>
                  </el-col>
                  <el-col :span="14">
                    <el-input v-model="p.className" placeholder="请输入内容"></el-input>
                  </el-col>
                </el-col>
              </el-row>

            </el-row>

            <!-- 条件为值，左边选择属性，右边可输入值，或选择枚举值-->
            <el-row style="padding: 10px 0;" v-if="flowJudge.conditionType=='3'">
              <el-form-item label="实体属性" prop="">
                <el-col :span="4" class="mr10">
                  <el-select v-model="flowJudge.leftEntityId" filterable clearable placeholder="实体">
                    <el-option
                      v-for="item in curEntityList"
                      :key="item.entityId"
                      :label="item.entityName"
                      :value="item.entityId"
                      @click.native="changeLeftEntity(item,jindex)">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="flowJudge.leftProperty" filterable clearable placeholder="实体属性">
                    <el-option
                      v-for="item in leftEntityItemInfos"
                      :key="item.itemId"
                      :label="item.label"
                      :value="item.itemId"
                      @click.native="changeLeftPro(item,jindex)"
                    >
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-select v-model="flowJudge.sysbol" filterable clearable placeholder="请选择比较符">
                    <el-option
                      v-for="item in sysbols"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-col>
                <el-col :span="4">
                  <el-input v-model="flowJudge.rightValue" placeholder="请输入内容"></el-input>
                </el-col>
              </el-form-item>

            </el-row>


          </el-row>

        </el-row>

        <!--节点坐标-->
<!--        <el-row style="padding: 10px 0;">-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="节点X坐标" prop="flowShapeX">-->
<!--              <el-input v-model="flow.flowShapeX" placeholder="节点X坐标"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--          <el-col :span="12">-->
<!--            <el-form-item label="节点Y坐标" prop="flowShapeY">-->
<!--              <el-input v-model="flow.flowShapeY" placeholder="节点Y坐标"></el-input>-->
<!--            </el-form-item>-->
<!--          </el-col>-->
<!--        </el-row>-->

        <el-row v-if="circleList.length > 0 ">
          <el-col :span="12">
            <el-form-item label="结束循环" prop="flowShapeX">
              <el-select v-model="flow.endCircle" filterable clearable placeholder="结束循环">
                <el-option
                  v-for="item in circleList"
                  :key="item.flowShapeId"
                  :label="item.flowShapeName"
                  :value="item.flowShapeId">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>


        <el-row v-if="judgeNodeList.length > 0">

          <el-row>
            <el-col :span="12">
              <el-form-item label="否判断节点" prop="">
                <el-select v-model="isJudgeNode" filterable clearable placeholder="是否为判断节点下的否节点">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

            </el-col>
          </el-row>

          <el-row v-if="isJudgeNode==='1'">
            <el-col :span="12">
              <el-form-item label="判断节点" prop="flowShapeX">
                <el-select v-model="flow.endYjudge" filterable clearable placeholder="判断节点">
                  <el-option
                    v-for="item in judgeNodeList"
                    :key="item.flowShapeId"
                    :label="item.flowShapeName"
                    :value="item.flowShapeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="结束否判断" prop="flowShapeX">
                <el-select v-model="flow.endNjudge" filterable clearable placeholder="结束否判断">
                  <el-option
                    v-for="item in judgeNodeList"
                    :key="item.flowShapeId"
                    :label="item.flowShapeName"
                    :value="item.flowShapeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-else>
            <el-col :span="12">
              <el-form-item label="结束是判断" prop="flowShapeX">
                <el-select v-model="flow.endYjudge" filterable clearable placeholder="结束是判断">
                  <el-option
                    v-for="item in judgeNodeList"
                    :key="item.flowShapeId"
                    :label="item.flowShapeName"
                    :value="item.flowShapeId">
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-row>


      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button @click="flowVisible = false">取 消</el-button>
        <el-button type="primary" v-if="isEditNode && isJudgeNode==='0'" @click="editNext">确 定</el-button>
        <el-button type="primary" v-else-if="isJudgeNode==='1'" @click="editNnode">确 定</el-button>
        <el-button type="primary" v-else @click="next">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="节点连接线详情"
      width="60%"
      :close-on-click-modal="false"
      :visible.sync="flowPointtVisible"
      append-to-body>
      <el-form :model="flow" ref="dataForm" label-width="80px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="起始节点" prop="flowShapeName">
              <el-select v-model="point.source" filterable placeholder="请选择">
                <el-option
                  v-for="item in nodeList"
                  :key="item.flowShapeId"
                  :label="item.flowShapeName"
                  :value="item.flowShapeId"
                  @click.native="changeSource(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始节点X" prop="flowNodeType">
              <el-input v-model="point.x1" disabled placeholder="节点X坐标"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="起始节点Y" prop="flowNodeType">
              <el-input v-model="point.y1" disabled placeholder="节点X坐标"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="终止节点" prop="flowShapeName">
              <el-select v-model="point.target" filterable placeholder="请选择">
                <el-option
                  v-for="item in nodeList"
                  :key="item.flowShapeId"
                  :label="item.flowShapeName"
                  :value="item.flowShapeId"
                  @click.native="changeTarget(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="终止节点X" prop="flowNodeType">
              <el-input v-model="point.x2" disabled placeholder="节点X坐标"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="终止节点Y" prop="flowNodeType">
              <el-input v-model="point.y2" disabled placeholder="节点X坐标"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="8">
            <el-form-item label="备注" prop="flowNodeType">
              <el-input v-model="point.labelText" placeholder="连接线说明"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="连线方向" prop="flowShapeName">
              <el-select v-model="point.circleType" filterable placeholder="请选择">
                <el-option
                  v-for="item in circleTypes"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click.native="changeCircleType(item)">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="修改x坐标" prop="flowNodeType">
              <el-col :span="4">
                <span @click="sub" class="span-txt">-</span>
              </el-col>
              <el-col :span="8">
                <el-input v-model="point.x1" disabled placeholder="X坐标"></el-input>
              </el-col>
              <el-col :span="4">
                <span @click="add" class="span-txt">+</span>
              </el-col>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button @click="flowPointtVisible = false">取 消</el-button>
        <el-button type="primary" v-if="isEditPoint" @click="editNextPoint">确 定</el-button>
        <el-button type="primary" v-else @click="nextPoint">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
    import {init, update} from '@/utils/g6Utils.min.js'
    import {entityList, entityItemList,getEntityByItemID} from '@/api/baseConfig/entity'
    import {saveFlow,listFlow,listFlowInfosByEntity} from '@/api/ruleConfig/flow'
    import {listGroupData,listGroupInfosByEntity} from '@/api/ruleConfig/groupInfo'
    import {flowDetail} from "@/api/version/version"
    import constant from "@/api/constant";

    import {codemirror} from 'vue-codemirror'
    import 'codemirror/theme/ambiance.css'  // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
    require('codemirror/mode/javascript/javascript') // 这里引入的模式的js，根据设置的mode引入，一定要引入！！

    export default {
        name: 'App',
        data() {
            return {
                sourceType:null,
                flowId:null,
                flowIdentify:null,
                flowVersion:null,
                flowVersionList:[],//子流程版本信息
                checkEntity:[],//选择的模型
                curEntity:[],//选择的模型
                curEntityList:[],
                dataForm: {
                    id: null,
                    flowName: '',
                    flowIdentify: '',
                    flowJava: '',
                    isEffect:'1'
                },
                cmOptions: {
                    value: '',
                    mode: 'x-java',
                    theme: 'ambiance',
                    readOnly: true,
                    lineNumbers: true
                },
                sceneVersionList: [],
                flows: [],//流程集合
                options: [
                    {label: '是', value: '1'},
                    {label: '否', value: '0'}
                ],
                isJudgeNode: '0',
                isNnode: false,
                showParams: false,
                enumFlag: false,
                methodList: [],
                methodParams: [],
                enumList: [],
                flowJudges: [],
                leftEntityItemInfos: [],
                rightEntityItemInfos: [],
                entityEnum: '',
                sysbols: constant.ruleConfig.sysbols,
                relList: [
                    {label: 'and', value: 'and'},
                    {label: 'or', value: 'or'}
                ],
                conditionTyps: [
                    {label: '实体属性', value: '1'},
                    {label: '枚举|输入值', value: '3'}
                ],
                isEditPoint: false,
                isEditNode: false,
                initFlag: false, // 是否初始化
                entityList: [], // 实体列表
                entityItemInfos: [], // 实体LIST属性列表
                groupList: [], // 规则组列表
                point: { // 连接线对象
                    source: '',
                    sourceName: '',
                    target: '',
                    targetName: '',
                    labelText: '',
                    edgeId: '',
                    pointType: '',
                    circleType: '',
                    remark: '',
                    x1: 0,
                    x2: 0,
                    y1: 0,
                    y2: 0
                },
                flow: { // 节点对象
                    flowShapeName: '', // name
                    flowNode: '', // shape
                    flowShapeId: '', // id
                    flowShapeX: 0, // x
                    flowShapeY: 0, // y
                    flowShapeStatus: '', // status
                    flowNextNode: '', //
                    entityId: null,
                    itemId: null,
                    flowId: null,
                    groupIdentify: '',
                    flowIdentify: '',
                    endCircle: '',
                    flowNodeType: '', // 1-root节点,2-执行规则节点,3-循环节点,4-其他
                    seq: 0,
                    endYjudge: '',
                    endNjudge: '',
                    yflowShapeId: '',
                    nflowShapeId: '',
                    judgeNextNode: '',
                    flowJudges: [],
                    groupVersion: null,
                    curEntity:'',
                    childFlowIdentify:'',
                    childFlowVersion:null
                },
                flowTypes: [
                    {label: '执行规则节点', value: '2', status: 'ing'},
                    {label: '循环节点', value: '3', status: 'circle'},
                    {label: '其他', value: '4', status: 'done'},
                    {label: '判断节点', value: '5', status: 'if'},
                    {label: '子流程', value: '6', status: 'cflow'}
                ],
                circleTypes: [ //
                    {label: '左边', value: 'left'},
                    {label: '右边', value: 'right'}
                ],
                flowVisible: false,
                flowPointtVisible: false,
                dataList: [], // 所有节点
                nodeList: [], // 所有node节点
                circleList: [], // 所有循环节点
                pointList: [], // 所有连接线
                judgeNodeList: [], // 所有判断节点
                circlePointList: [], // 所有循环连接线
                x: 200,
                y: 100,
                index: 0,
                edgeIndex: 0,
                flowData: {
                    nodes: [
                        {
                            shape: 'root',
                            id: 'begin',
                            name: '开始',
                            x: 200,
                            y: 100
                        }
                    ],
                    edges: [],
                    groups: [],
                    guides: [
                        {
                            id: 'states',
                            shape: 'states'
                        }
                    ],
                    status: [
                        {
                            title: 'done',
                            color: 'green',
                            name: '返回结果'
                        },
                        {
                            title: 'cflow',
                            color: 'green',
                            name: '子流程'
                        },
                        {
                            title: 'ing',
                            color: 'red',
                            name: '执行规则'
                        },
                        {
                            title: 'if',
                            color: 'green',
                            name: '执行判断'
                        },
                        {
                            title: 'circle',
                            color: '#EE8262',
                            name: '循环'
                        }
                    ]
                }
            }
        },
        components: {
            codemirror
        },
        props: {
            // flowId: {
            //     type: Number,
            //     default: null
            // }
        },
        created() {
            let flowIdentify = this.$route.params.flowIdentify
            this.flowVersion = this.$route.params.flowVersion
            this.sourceType = this.$route.params.type
            this.flowIdentify = flowIdentify
            // 初始化实体
            this.getEntityList()
            this.initFlow()
        },
        mounted(){
        },
        methods: {
            toList(){
                constant.clearTag(this)
                if(this.sourceType == 'audit'){
                    this.$router.push({name: constant.routerName.listAuditFlow})
                }else if(this.sourceType=="release"){
                    this.$router.push({name: constant.routerName.listReleaseFlow})
                }else{
                    this.$router.push({name: constant.routerName.listVersionFlow})
                }
            },
            // 子流程选择
            changeChildFlow(data){
            },
            backToList(){
                this.$emit('refreshVisble')
                this.$emit('refreshDataList')
            },
            tabClick() {

            },
            // 规则组选择
            getGroupVersion(data) {
            },
            changeCircleType(item) {
                if (item.value === 'left') {
                    this.point.x1 = 0
                    this.point.x2 = 0
                }
            },
            // 新增否节点
            editNnode() {
                if (!this.flow.flowNodeType) {
                    this.$message.error('请选择节点类型')
                    return false
                } else {
                    if (this.flow.flowNodeType === '2' && !this.flow.groupIdentify) {
                        this.$message.error('请选择执行规则组')
                        return false
                    } else if (this.flow.flowNodeType === '3') {
                        if (!this.flow.entityId || !this.flow.itemId) {
                            this.$message.error('请选择实体及要循环的属性')
                            return false
                        }
                        for (var i = 0; i < this.dataList.length; i++) {
                            let item = this.dataList[i]
                            if (item.entityId === this.flow.entityId && item.itemId === this.flow.itemId) {
                                this.$message.error('该实体及要循环的属性已存在循环节点')
                                return false
                            }
                        }
                    }
                }

                if (!this.flow.flowShapeName) {
                    this.$message.error('请输入节点名称')
                    return false
                }

                // 如果是判断节点
                if (this.flow.flowNodeType === '5') {
                    this.flow.flowJudges = []
                    this.flowJudges.forEach(item => {
                        item.flowId = this.flow.flowId
                        item.flowShapeId = this.flow.flowShapeId
                        this.flow.flowJudges.push(item)
                    })
                }
                // 如果编辑
                if (this.isEditNode) {
                    this.flowData.nodes.forEach(item => {
                        if (item.id === this.flow.flowShapeId) {
                            item.name = this.flow.flowShapeName
                        }
                    })
                } else { // 新增
                    this.y = this.y + 100
                    this.index = this.index + 1
                    this.edgeIndex = this.edgeIndex + 1
                    let nodeId = 'node' + this.index
                    let item = {
                        shape: 'node',
                        id: nodeId,
                        name: this.flow.flowShapeName, // 名称
                        status: this.flow.flowShapeStatus, // 形状
                        x: this.x,
                        y: this.y
                    }
                    this.flowData.nodes.push(item)

                    // 画否判断的连接线
                    this.endNFlowJudge(this.flow)
                }
                update(this.flowData)

                this.dataList.push(this.flow)
                if (this.flow.flowNodeType === '3') {
                    this.circleList.push(this.flow)
                } else if (this.flow.flowNodeType === '5') {
                    this.judgeNodeList.push(this.flow)
                }
                this.nodeList.push(this.flow)
                this.isNnode = false
                this.flowVisible = false
            },
            // 否节点 画线
            endNFlowJudge(data) {
                let that = this
                let startJudgeFlow = {}
                this.edgeIndex = this.edgeIndex + 1

                // 找出判断节点
                let dataList = []
                this.dataList.forEach(item => {
                    if (that.flow.endYjudge && item.flowShapeId === that.flow.endYjudge) {
                        startJudgeFlow = item
                        item.nflowShapeId = this.flow.flowShapeId
                    }
                    if (this.flow.endNjudge && item.flowShapeId === that.flow.endNjudge) {
                        item.judgeNextNode = 'node' + (this.index + 1)
                    }
                    dataList.push(item)
                })
                this.dataList = dataList
                this.flow.endYjudge = ''

                let edge = {
                    id: 'edge' + this.edgeIndex,
                    source: startJudgeFlow.flowShapeId,
                    sourceName: startJudgeFlow.flowShapeName,
                    target: data.flowShapeId,
                    circleType: 'right',
                    targetName: data.flowShapeName,
                    type: 'circle',
                    label: '否',
                    controlPoints: [
                        {
                            x: 0,
                            y: startJudgeFlow.flowShapeY
                        },
                        {
                            x: 0,
                            y: data.flowShapeY
                        }
                    ]
                }
                this.flowData.edges.push(edge)

                let point = {
                    source: startJudgeFlow.flowShapeId,
                    target: data.flowShapeId,
                    sourceName: startJudgeFlow.flowShapeName,
                    targetName: data.flowShapeName,
                    edgeId: 'edge' + this.edgeIndex,
                    pointType: 'circle',
                    labelText: '否',
                    circleType: 'right',
                    x1: 0,
                    x2: 0,
                    y1: startJudgeFlow.flowShapeY,
                    y2: data.flowShapeY,
                    seq: this.edgeIndex
                }
                this.pointList.push(point)
            },

            // 添加条件
            addConditions() {
                let flowJudge = {
                    sysbol: '',
                    flowShapeId: '',
                    flowId: null,
                    leftProperty: null,
                    rightProperty: null,
                    entityId: null,
                    leftEntityId: null,
                    rightEntityId: null,
                    conditionType: '',
                    conditionRel: '',
                    showRel: false,
                    rightValue: ''
                }
                if (this.flowJudges.length > 0) {
                    this.flowJudges[this.flowJudges.length - 1].showRel = true
                    this.flowJudges[this.flowJudges.length - 1].conditionRel = 'and'
                }
                this.flowJudges.push(flowJudge)
            },
            // 选择方法
            insertM(data, jindex) {
                this.showParams = false
                // 有参数
                if (data.type === '1' || data.type === '3') {
                    if (data.params) {
                        this.showParams = true
                        this.methodParams = data.params
                    }
                }
            },
            // 左实体
            changeLeftEntity(item) {
                let params = {
                    id: item.entityId + ''
                }
                // 获取实体类属性
                this.leftEntityItemInfos = []
                entityItemList(params).then(res => {
                    if (res.data.data) {
                        res.data.data.forEach(item => {
                            item['label'] = item.itemName + '--' + item.itemIdentify
                            this.leftEntityItemInfos.push(item)
                        })
                    }
                })
            },
            // 右实体
            changeRightEntity(item) {
                let params = {
                    id: item.entityId + ''
                }
                // 获取实体类属性
                entityItemList(params).then(res => {
                    this.rightEntityItemInfos = [] // res.data.data
                    if (res.data.data) {
                        res.data.data.forEach(item => {
                            item['label'] = item.itemName + '--' + item.itemIdentify
                            this.rightEntityItemInfos.push(item)
                        })
                    }
                })
            },
            // 左属性
            changeLeftPro(item) {
                if (item.itemType === 'String') {
                    this.sysbols = [
                        {label: '==', value: '1'},
                        {label: '!=', value: '2'}
                    ]
                } else {
                    this.sysbols = [
                        {label: '==', value: '1'},
                        {label: '!=', value: '2'},
                        {label: '<=', value: '3'},
                        {label: '<', value: '4'},
                        {label: '>=', value: '5'},
                        {label: '>', value: '6'}
                    ]
                }
            },
            // 重置条件
            clear(jindex) {
                this.flowJudges.splice(jindex, 1)
                // this.flowJudges[jindex].sysbol = ''
                // this.flowJudges[jindex].leftProperty = null
                // this.flowJudges[jindex].rightProperty = null
                // this.flowJudges[jindex].entityId = null
                // this.flowJudges[jindex].leftEntityId = null
                // this.flowJudges[jindex].rightValue = ''
                // this.flowJudges[jindex].conditionType = ''
            },
            // 判断节点 条件类型改变事件
            changeConditionType(item, jindex) {
                this.flowJudges[jindex].sysbol = ''
                this.flowJudges[jindex].leftProperty = null
                this.flowJudges[jindex].rightProperty = null
                this.flowJudges[jindex].entityId = null
                this.flowJudges[jindex].leftEntityId = null
                this.flowJudges[jindex].rightValue = ''
            },
            // 判断节点 条件类型为方法时，实体类改变事件
            changeEntityItem(item) {
            },
            // 初始化
            initFlow() {
                if(!this.flowIdentify){
                    return
                }
                let params = {
                    flowIdentify: this.flowIdentify,
                    flowVersion: this.flowVersion
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                flowDetail(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    if (res.data.data) {
                        this.dataForm = res.data.data.ruleFlow
                        this.dataForm.flowJava = res.data.data.flowJava

                        this.dataList = res.data.data.flows
                        this.dataList.forEach(item => {
                            if (item.flowNode === 'node') {
                                this.nodeList.push(item)
                            }
                            if (item.flowNodeType === '3') {
                                this.circleList.push(item)
                            }
                            if (item.flowNodeType === '5') {
                                this.judgeNodeList.push(item)
                            }
                        })
                        this.pointList = res.data.data.points
                        if (this.pointList) {
                            this.pointList.forEach(item => {
                                if (item.pointType === 'circle') {
                                    this.circlePointList.push(item)
                                }
                            })
                        }
                        res.data.data.relList.forEach(item => {
                            this.checkEntity.push(item.entityId + '')
                        })
                        this.flowData.edges = res.data.data.edges
                        this.flowData.nodes = res.data.data.nodes
                        init('mountNode', 620, 835, this.flowData)
                        this.edgeIndex = this.flowData.edges.length
                        this.initFlag = true
                    }
                }).catch(err=>{
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                })
            },

            // 获取实体类的属性
            getEntityProperties() {
                let params = {
                    id: this.flow.entityId + ''
                }
                // 获取实体类属性
                this.entityItemInfos = []
                entityItemList(params).then(res => {
                    if (res.data.data) {
                        res.data.data.forEach(item => {
                            if (item.itemType === 'List') {
                                item['label'] = item.itemName + '--' + item.itemIdentify
                                this.entityItemInfos.push(item)
                            }
                        })
                    }
                })
            },
            // 获取实体类的属性
            getEntityList() {
                let params = {}
                entityList(params).then(res => {
                    if (res.data.data) {
                        this.entityList = []
                        res.data.data.forEach(item => {
                            item['label'] = item.entityIdentify + ' -- ' + item.entityName
                            this.entityList.push(item)
                        })
                    }
                })
            },
            // 获取规则组信息
            getGroupList(ids) {
                let params = {
                    ids:JSON.stringify(ids)
                }
                listGroupInfosByEntity(params).then(res => {
                    this.groupList = res.data.data
                })
            },
            // 获取子流程信息
            getFlowList(ids) {
                let params = {
                    ids:JSON.stringify(ids)
                }
                listFlowInfosByEntity(params).then(res => {
                    this.flows = res.data.data
                })
            },
            // 重置
            reset() {
                this.dataList = []
                this.pointList = []
                this.circleList = []
                this.circlePointList = []
                this.flowJudges = []
                this.judgeNodeList = []
                this.nodeList = []
                this.flowData.nodes = []
                this.flowData.edges = []
                this.x = 200
                this.y = 100
                this.index = 0
                this.edgeIndex = 0
                this.begin()
            },
            // 减横坐标
            sub() {
                this.point.x1 = this.point.x1 - 50
                this.point.x2 = this.point.x2 - 50
            },
            // 加横坐标
            add() {
                this.point.x1 = this.point.x1 + 50
                this.point.x2 = this.point.x2 + 50
            },
            // 弹出连线框
            joinLine() {
                if (this.dataList.length <= 2) {
                    this.$message.error('请添加至少3个节点')
                    return false
                }
                this.point = {
                    source: '',
                    sourceName: '',
                    target: '',
                    targetName: '',
                    labelText: '',
                    edgeId: '',
                    pointType: '',
                    circleType: '',
                    remark: '',
                    x1: 0,
                    x2: 0,
                    y1: 0,
                    y2: 0
                }
                this.flowPointtVisible = true
            },
            editPoint(item) {
                this.point = item
                this.isEditPoint = true
                this.flowPointtVisible = true
            },
            // 修改连接线
            editNextPoint() {
                let data1 = []
                this.circlePointList = []
                this.pointList.forEach(item => {
                    if (item.edgeId === this.point.edgeId) {
                        item = this.point
                    }
                    if (item.pointType === 'circle') {
                        this.circlePointList.push(item)
                    }
                    data1.push(item)
                })
                this.pointList = data1
                debugger
                let startStatu = ''
                let endStatu = ''
                // 找出判断节点
                this.dataList.forEach(item => {
                    if (item.flowShapeId === this.point.source) {
                        startStatu = item.flowNodeType
                    }
                    if (item.flowShapeId === this.point.target) {
                        endStatu = item.flowNodeType
                    }
                })

                let edge = {
                    id: this.point.edgeId,
                    source: this.point.source,
                    target: this.point.target,
                    endStatu: endStatu,
                    startStatu: startStatu,
                    label: this.point.labelText,
                    circleType: this.point.circleType,
                    controlPoints: [
                        {
                            x: this.point.x1,
                            y: this.point.y1
                        },
                        {
                            x: this.point.x2,
                            y: this.point.y2
                        }
                    ]
                }
                let data2 = []
                this.flowData.edges.forEach(item => {
                    if (item.source === this.point.source && item.target === this.point.target) {
                        item = edge
                    }
                    data2.push(item)
                })
                this.flowData.edges = data2

                update(this.flowData)
                this.flowPointtVisible = false
            },
            // 确定连线
            nextPoint() {
                this.y = this.y + 100
                this.edgeIndex = Number(this.edgeIndex) + 1

                let startStatu = ''
                let endStatu = ''
                // 找出判断节点
                this.dataList.forEach(item => {
                    if (item.flowShapeId === this.point.source) {
                        startStatu = item.flowNodeType
                    }
                    if (item.flowShapeId === this.point.target) {
                        endStatu = item.flowNodeType
                    }
                })

                let edge = {
                    id: 'edge' + this.edgeIndex,
                    source: this.point.source,
                    target: this.point.target,
                    endStatu: endStatu,
                    startStatu: startStatu,
                    label: this.point.labelText,
                    circleType: this.point.circleType,
                    controlPoints: [
                        {
                            x: this.point.x1,
                            y: this.point.y1
                        },
                        {
                            x: this.point.x2,
                            y: this.point.y2
                        }
                    ]
                }
                this.flowData.edges.push(edge)
                update(this.flowData)

                this.point.edgeId = 'edge' + this.edgeIndex
                this.point.pointType = 'circle'
                this.point.seq = this.edgeIndex

                this.pointList.push(this.point)
                this.circlePointList.push(this.point)
                this.flowPointtVisible = false
            },

            // 修改节点状态
            changeType(item) {
                this.flow.flowShapeStatus = item.status

                if (this.flow.flowShapeStatus === 'if') {
                    if (this.flowJudges.length === 0) {
                        this.addConditions()
                    }
                }
            },
            // 修改起点
            changeSource(item) {
                this.point.x1 = item.flowShapeX + 100
                this.point.y1 = item.flowShapeY
                this.point.sourceName = item.flowShapeName
            },
            // 修改终点
            changeTarget(item) {
                this.point.x2 = item.flowShapeX + 100
                this.point.y2 = item.flowShapeY
                this.point.targetName = item.flowShapeName
            },
            // 开始按钮
            begin() {
                for (var i = 0; i < this.dataList.length; i++) {
                    let item = this.dataList[i]
                    if (item.flowShapeId === 'begin') {
                        this.$message.error('流程已开始，无需再添加')
                        return false
                    }
                }
                if(this.checkEntity.length<=0){
                    this.$message.error('请关联实体')
                    return false
                }
                let flow = {
                    flowShapeName: '开始', // name
                    flowNode: 'root', // shape
                    flowShapeId: 'begin', // id
                    flowShapeX: this.x, // x
                    flowShapeY: this.y, // y
                    flowShapeStatus: '', // status
                    flowNextNode: 'node1', //
                    flowNodeType: '1', // 1-root节点,2-执行规则节点,3-循环节点,4-其他
                    seq: this.index,
                    curEntitys:JSON.stringify(this.checkEntity)
                }
                this.curEntity = this.checkEntity
                this.dataList.push(flow)

                this.flowData.nodes = [{
                    shape: 'root',
                    id: 'begin',
                    name: '开始',
                    x: 200,
                    y: 100
                }]
                if (this.initFlag) {
                    update(this.flowData)
                } else {
                    init('mountNode', 500, 500, this.flowData)
                    this.initFlag = true
                }
            },

            // 结束按钮
            end() {
                if (this.dataList.length <= 0) {
                    this.$message.error('请添加开始节点')
                    return false
                }
                if (this.dataList.length === 1) {
                    this.$message.error('请添加流程节点')
                    return false
                }
                for (var i = 0; i < this.dataList.length; i++) {
                    let item = this.dataList[i]
                    if (item.flowShapeId === 'end') {
                        this.$message.error('流程已结束，无需再添加')
                        return false
                    }
                }
                this.y = this.y + 100
                this.edgeIndex = this.edgeIndex + 1
                let item = {
                    shape: 'root',
                    id: 'end',
                    name: '结束',
                    x: this.x,
                    y: this.y
                }
                this.flowData.nodes.push(item)
                let preNode = 'node' + (this.index)
                let edge = {
                    id: 'edge' + this.edgeIndex,
                    source: preNode,
                    type: 'next',
                    target: 'end'
                }

                let flow = {
                    flowShapeName: '结束', // name
                    flowNode: 'root', // shape
                    flowShapeId: 'end', // id
                    flowShapeX: this.x, // x
                    flowShapeY: this.y, // y
                    flowShapeStatus: '', // status
                    flowNextNode: '', //
                    flowNodeType: '1', // 1-root节点,2-执行规则节点,3-循环节点,4-其他
                    seq: (this.index + 1)
                }
                this.dataList.push(flow)
                this.dataList.forEach(item => {
                    if (item.flowShapeId === preNode) {
                        item.flowNextNode = 'end'
                    }
                })

                let point = {
                    source: preNode,
                    edgeId: 'edge' + this.edgeIndex,
                    pointType: 'next',
                    target: 'end',
                    seq: this.edgeIndex
                }

                this.pointList.push(point)
                this.flowData.edges.push(edge)
                update(this.flowData)
            },

            // 修改节点
            editNode(item) {
                this.flow = item
                this.flowJudges = this.flow.flowJudges
                this.flowVisible = true
                this.isEditNode = true
                this.isJudgeNode = '0'
                if (this.flow.entityId) {
                    this.getEntityProperties()
                }
                //当前实体类
                this.curEntityList = []
                let curEntity = JSON.parse(this.flow.curEntitys)
                curEntity.forEach(item=>{
                    this.entityList.forEach(e=>{
                        let id = e.entityId+''
                        if(item === id){
                            this.curEntityList.push(e)
                        }
                    })
                })
                //当前规则组
                this.getGroupList(curEntity)
                this.getFlowList(curEntity)
                this.dataList.forEach(item => {
                    if (item.nflowShapeId === this.flow.flowShapeId) {
                        this.isJudgeNode = '1'
                        this.flow.endYjudge = item.flowShapeId
                    }
                })
                // console.log(this.dataList)
            },
            // 弹出下一步框
            showNext() {
                this.isNnode = false
                this.isJudgeNode = '0'

                if (this.dataList.length <= 0) {
                    this.$message.error('请添加开始节点')
                    return false
                }
                for (var i = 0; i < this.dataList.length; i++) {
                    let item = this.dataList[i]
                    if (item.flowShapeId === 'end') {
                        this.$message.error('流程已结束，如需修改请重置')
                        return false
                    }
                }

                this.flowVisible = true

                this.flowJudges = []
                this.isEditNode = false
                let y = this.y + 100
                let index = Number(this.index) + 1
                let nodeId = 'node' + index
                let nextNode = Number(this.index) + 2
                this.flow = {
                    flowShapeName: '', // name
                    flowNode: 'node', // shape
                    flowShapeId: nodeId, // id
                    flowShapeX: this.x, // x
                    flowShapeY: y, // y
                    flowShapeStatus: '', // status
                    flowNextNode: 'node' + nextNode,
                    flowNodeType: '', // 1-root节点,2-执行规则节点,3-循环节点,4-其他
                    endCircle: '',
                    seq: index,
                    curEntitys: JSON.stringify(this.curEntity)
                }
                //当前实体类
                this.curEntityList = []
                this.curEntity.forEach(item=>{
                    this.entityList.forEach(e=>{
                        let id = e.entityId+''
                        if(item === id){
                            this.curEntityList.push(e)
                        }
                    })
                })
                this.getGroupList(this.curEntity)
                this.getFlowList(this.curEntity)
                // console.log(this.flow)
            },

            // 修改下一步
            editNext() {
                this.circleList = []
                this.nodeList = []
                for (var i = 0; i < this.dataList.length; i++) {
                    let item = this.dataList[i]
                    if (item.flowShapeId !== this.flow.flowShapeId && item.entityId) {
                        if (item.entityId === this.flow.entityId && item.itemId === this.flow.itemId) {
                            this.$message.error('该实体及要循环的属性已存在循环节点')
                            return false
                        }
                    }
                }
                if (this.flow.flowNodeType === '5') {
                    if (!this.flowJudges || this.flowJudges.length <= 0) {
                        this.$message.error('请新增判断条件')
                        return false
                    }
                    for (let i = 0; i < this.flowJudges.length; i++) {
                        let item = this.flowJudges[i]
                        if (!item.conditionType) {
                            this.$message.error('请选择条件类型')
                            return false
                        }
                        if (item.conditionType === '1') {
                            if (!(item.leftEntityId && item.leftProperty && item.sysbol && item.rightEntityId && item.rightProperty)) {
                                this.$message.error('条件内容不完整')
                                return false
                            }
                        }
                        if (item.conditionType === '3') {
                            if (!(item.leftEntityId && item.leftProperty && item.sysbol && item.rightValue)) {
                                this.$message.error('条件内容不完整')
                                return false
                            }
                        }
                    }
                }
                this.dataList.forEach(item => {
                    if (item.flowShapeId === this.flow.flowShapeId) {
                        item = this.flow
                    }
                    if (item.flowNodeType === '3') {
                        this.circleList.push(item)
                    }
                    if (item.flowNodeType === '2') {
                        this.nodeList.push(item)
                    }
                })
                this.flowData.nodes.forEach(item => {
                    if (item.id === this.flow.flowShapeId) {
                        item.name = this.flow.flowShapeName
                    }
                })
                // console.log(this.flowData)
                update(this.flowData)
                this.flowVisible = false

                // 是否结束否判断节点
                let dataList = []
                this.dataList.forEach(item => {
                    if (this.flow.endNjudge && item.flowShapeId === this.flow.endNjudge) {
                        item.endNjudge = this.flow.endNjudge
                    }
                    if (this.flow.endNjudge && item.flowShapeId === this.flow.endNjudge) {
                        item.judgeNextNode = 'node' + (this.index + 1)
                    }
                    dataList.push(item)
                })
                this.dataList = dataList

                // 如果是判断节点
                if (this.flow.flowNodeType === '5') {
                    this.flow.flowJudges = []
                    this.flowJudges.forEach(item => {
                        item.flowId = this.flow.flowId
                        item.flowShapeId = this.flow.flowShapeId
                        this.flow.flowJudges.push(item)
                    })
                }
            },

            // 确定下一步
            next() {
                if (!this.flow.flowNodeType) {
                    this.$message.error('请选择节点类型')
                    return false
                } else {
                    if (this.flow.flowNodeType === '2' && !this.flow.groupIdentify) {
                        this.$message.error('请选择执行规则组')
                        return false
                    } else if (this.flow.flowNodeType === '3') {
                        if (!this.flow.entityId || !this.flow.itemId) {
                            this.$message.error('请选择实体及要循环的属性')
                            return false
                        }
                        for (var i = 0; i < this.dataList.length; i++) {
                            let item = this.dataList[i]
                            if (item.entityId === this.flow.entityId && item.itemId === this.flow.itemId) {
                                this.$message.error('该实体及要循环的属性已存在循环节点')
                                return false
                            }
                        }
                    } else if (this.flow.flowNodeType === '5') {
                        if (!this.flowJudges || this.flowJudges.length <= 0) {
                            this.$message.error('请新增判断条件')
                            return false
                        }
                        for (let i = 0; i < this.flowJudges.length; i++) {
                            let item = this.flowJudges[i]
                            if (!item.conditionType) {
                                this.$message.error('请选择条件类型')
                                return false
                            }
                            if (item.conditionType === '1') {
                                if (!(item.leftEntityId && item.leftProperty && item.sysbol && item.rightEntityId && item.rightProperty)) {
                                    this.$message.error('条件内容不完整')
                                    return false
                                }
                            }
                            if (item.conditionType === '3') {
                                if (!(item.leftEntityId && item.leftProperty && item.sysbol && item.rightValue)) {
                                    this.$message.error('条件内容不完整')
                                    return false
                                }
                            }
                        }
                    }else if (this.flow.flowNodeType === '6') {
                        if (!this.flow.childFlowIdentify ) {
                            this.$message.error('请选择流程及版本')
                            return false
                        }
                    }
                }

                if (!this.flow.flowShapeName) {
                    this.$message.error('请输入节点名称')
                    return false
                }
                this.y = this.y + 100
                this.index = this.index + 1
                this.edgeIndex = this.edgeIndex + 1
                let nodeId = 'node' + this.index
                let item = {
                    shape: 'node',
                    id: nodeId,
                    name: this.flow.flowShapeName, // 名称
                    status: this.flow.flowShapeStatus, // 形状
                    x: this.x,
                    y: this.y
                }
                this.flowData.nodes.push(item)
                if (this.index === 1) {
                    let edge = {
                        id: 'edge' + this.edgeIndex,
                        source: 'begin',
                        type: 'next',
                        target: nodeId
                    }
                    let point = {
                        source: 'begin',
                        edgeId: 'edge' + this.edgeIndex,
                        pointType: 'next',
                        target: nodeId,
                        seq: this.edgeIndex
                    }
                    this.pointList.push(point)
                    this.flowData.edges.push(edge)
                } else {
                    let edge = {
                        id: 'edge' + this.edgeIndex,
                        source: 'node' + (this.index - 1),
                        type: 'next',
                        target: nodeId
                    }
                    let point = {
                        source: 'node' + (this.index - 1),
                        edgeId: 'edge' + this.edgeIndex,
                        pointType: 'next',
                        seq: this.edgeIndex,
                        target: nodeId
                    }
                    let preFlow = this.dataList[this.dataList.length - 1]
                    if (preFlow.flowNodeType === '5') {
                        edge.label = '是'
                        point.labelText = '是'
                        preFlow.yflowShapeId = this.flow.flowShapeId
                        this.dataList[this.dataList.length - 1] = preFlow
                    }
                    this.pointList.push(point)
                    this.flowData.edges.push(edge)
                }

                // 循环线
                if (this.flow.endCircle) {
                    this.endCircle(this.flow)

                    //终止循环则移除终止的循环的list属性的实体ID
                    this.dataList.forEach(item=>{
                        if(this.flow.endCircle === item.flowShapeId){
                            let params = {
                                id: item.itemId+''
                            }
                            //节点为循环，则把list属性所属的实体ID加入下一节点的实体
                            getEntityByItemID(params).then(res=>{
                                if(res.data.data && res.data.data.entityId){
                                    let entitys = []
                                    let id = res.data.data.entityId+''
                                    this.curEntity.forEach(c=>{
                                        if(c != id){
                                            entitys.push(c)
                                        }
                                    })
                                    this.curEntity = entitys
                                }
                            })
                        }
                    })
                }

                // 如果是判断节点
                if (this.flow.flowNodeType === '5') {
                    this.flow.flowJudges = []
                    this.flowJudges.forEach(item => {
                        item.flowId = this.flow.flowId
                        item.flowShapeId = this.flow.flowShapeId
                        this.flow.flowJudges.push(item)
                    })
                }

                update(this.flowData)

                this.dataList.push(this.flow)

                // 是否结束否判断节点
                let dataList = []
                this.dataList.forEach(item => {
                    if (this.flow.endNjudge && item.flowShapeId === this.flow.endNjudge) {
                        item.endNjudge = this.flow.endNjudge
                        item.judgeNextNode = 'node' + (this.index + 1)
                    }
                    if (this.flow.endYjudge && item.flowShapeId === this.flow.endYjudge) {
                        item.endYjudge = this.flow.endYjudge
                    }
                    dataList.push(item)
                })
                this.dataList = dataList


                if (this.flow.flowNodeType === '3') {
                    let params = {
                        id: this.flow.itemId+''
                    }
                    //节点为循环，则把list属性所属的实体ID加入下一节点的实体
                    getEntityByItemID(params).then(res=>{
                        if(res.data.data){
                            this.curEntity.push(res.data.data.entityId+'')
                        }
                    })
                    this.circleList.push(this.flow)
                } else if (this.flow.flowNodeType === '5') {
                    this.judgeNodeList.push(this.flow)
                }
                this.nodeList.push(this.flow)
                this.flowVisible = false
            },

            // 循环终止线
            endCircle(flow) {
                let endCircle = {}
                this.circleList = []
                this.dataList.forEach(item => {
                    if (item.flowShapeId === flow.endCircle) {
                        endCircle = item
                    } else {
                        if (item.flowNodeType === '3') {
                            this.circleList.push(item)
                        }
                    }
                })

                this.edgeIndex = this.edgeIndex + 1
                let edge = {
                    id: 'edge' + this.edgeIndex,
                    source: flow.flowShapeId,
                    sourceName: flow.flowShapeName,
                    target: flow.endCircle,
                    circleType: 'right',
                    targetName: endCircle.flowShapeName,
                    type: 'circle',
                    label: '循环结束',
                    controlPoints: [
                        {
                            x: flow.flowShapeX + 100,
                            y: flow.flowShapeY
                        },
                        {
                            x: endCircle.flowShapeX + 100,
                            y: endCircle.flowShapeY
                        }
                    ]
                }
                this.flowData.edges.push(edge)

                let point = {
                    source: flow.flowShapeId,
                    target: flow.endCircle,
                    sourceName: flow.flowShapeName,
                    targetName: endCircle.flowShapeName,
                    edgeId: 'edge' + this.edgeIndex,
                    pointType: 'circle',
                    labelText: '循环结束',
                    circleType: 'right',
                    x1: flow.flowShapeX + 100,
                    x2: endCircle.flowShapeX + 100,
                    y1: flow.flowShapeY,
                    y2: endCircle.flowShapeY,
                    seq: this.edgeIndex
                }
                this.pointList.push(point)
                this.circlePointList.push(point)
            },

            // 更新流程图
            toUpdate() {
                const data = {
                    nodes: [
                        {
                            shape: 'root',
                            id: 'begin',
                            name: '开始',
                            x: 100,
                            y: 100
                        },
                        {
                            shape: 'node',
                            id: 'shenhe1',
                            name: '审核',
                            status: 'done',
                            x: 200,
                            y: 200
                        },
                        {
                            shape: 'node',
                            id: 'xiafa',
                            name: '下发',
                            status: 'done',
                            x: 200,
                            y: 300
                        },
                        {
                            shape: 'node',
                            id: 'qianshou',
                            name: '签收',
                            style: {                 // 关键形样式（优先级高于color）
                                fill: 'red',
                                stroke: 'blue'
                            },
                            status: 'done',
                            x: 300,
                            y: 300
                        },
                        {
                            shape: 'node',
                            id: 'chuzhi',
                            name: '处置',
                            status: 'timeout',
                            x: 300,
                            y: 400
                        },
                        {
                            shape: 'node',
                            id: 'shangbao',
                            name: '上报',
                            status: '',
                            x: 300,
                            y: 500
                        },
                        {
                            shape: 'node',
                            id: 'shenhe2',
                            name: '审核',
                            status: '',
                            x: 200,
                            y: 500
                        },
                        {
                            shape: 'root',
                            id: 'end',
                            name: '结束',
                            status: '',
                            x: 100,
                            y: 500
                        }
                    ],
                    edges: [
                        {
                            id: 'edge1',
                            source: 'begin',
                            target: 'shenhe1',
                            controlPoints: [
                                {
                                    x: 230,
                                    y: 115
                                }
                            ]
                        },
                        {
                            id: 'edge2',
                            source: 'shenhe1',
                            target: 'xiafa'
                        },
                        {
                            id: 'edge3',
                            source: 'xiafa',
                            target: 'qianshou'
                        },
                        {
                            id: 'edge4',
                            source: 'qianshou',
                            target: 'chuzhi'
                        },
                        {
                            id: 'edge5',
                            source: 'chuzhi',
                            target: 'shangbao',
                            label: '完成'
                        },
                        {
                            id: 'edge6',
                            source: 'shangbao',
                            target: 'shenhe2'
                        },
                        {
                            id: 'edge7',
                            source: 'shenhe2',
                            target: 'end'
                        },
                        {
                            id: 'edge8',
                            source: 'shenhe1',
                            target: 'begin',
                            label: '不通过',
                            controlPoints: [
                                {
                                    x: 130,
                                    y: 215
                                }
                            ]
                        }
                    ],
                    groups: [],
                    guides: [
                        {
                            id: 'states',
                            shape: 'states'
                        }
                    ],
                    status: [
                        {
                            title: 'done',
                            color: 'green',
                            name: '已完成'
                        }
                    ]
                }
                // update(data);
                init('mountNode', 620, 835, data)
            },

            saveInfo() {
                if (!this.dataForm.flowName) {
                    this.$message.error('请输入流程名称')
                    return false
                }
                if(this.checkEntity.length<=0){
                    this.$message.error('请关联实体')
                    return false
                }
                if (this.dataList.length <= 0) {
                    this.$message.error('请添加节点')
                    return false
                }
                let flag = false
                let flag1 = false
                for (var i = 0; i < this.dataList.length; i++) {
                    let item = this.dataList[i]
                    if (item.flowShapeId === 'begin') {
                        flag = true
                    }
                    if (item.flowShapeId === 'end') {
                        flag1 = true
                    }
                }
                if (!flag) {
                    this.$message.error('请添加开始节点')
                    return false
                }
                if (!flag1) {
                    this.$message.error('请添加结束节点')
                    return false
                }



                // 判断条件
                let flowJudes = []
                this.dataList.forEach(item => {
                    if (item.flowNodeType === '5' && item.flowJudges) {
                        item.flowJudges.forEach(i => {
                            i.flowId = item.flowId
                            i.flowShapeId = item.flowShapeId
                            flowJudes.push(i)
                        })
                    }
                })

                let params = {
                    dataForm: JSON.stringify(this.dataForm),
                    relList: JSON.stringify(this.checkEntity),
                    flows: JSON.stringify(this.dataList),
                    points: JSON.stringify(this.pointList),
                    judges: JSON.stringify(flowJudes)
                }
                this.$store.dispatch('loading/CHANGE_LOADING', true)
                saveFlow(params).then(res => {
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                    if (res.data && res.data.resultCode === 0) {
                        this.$message.success(res.data.resultMsg)
                        // this.$emit('refreshVisble')
                        // this.$emit('refreshDataList')
                        this.toList()
                    } else {
                        this.$message.error(res.data.resultMsg)
                    }
                }).catch(err=>{
                    this.$store.dispatch('loading/CHANGE_LOADING', false)
                })

            }
        },
        mounted() {
        },
        filters: {
            typePipe: function (value) {
                let label = ''
                if (value === '2') {
                    label = '执行规则节点'
                } else if (value === '3') {
                    label = '循环节点'
                } else if (value === '4') {
                    label = '其他'
                } else if (value === '1') {
                    label = '起止节点'
                } else if (value === '5') {
                    label = '判断节点'
                }
                return label
            }
        }
    }
</script>

<style>
  .mod-home {
    line-height: 1.5;
  }

  #mountNode {
    /* width: 620px; */
    margin: 0 auto !important;
    /* height: 835px; */
    position: absolute;
    /* border: 1px saddlebrown solid; */
  }

  .span-txt {
    display: block;
    /*background-color: #f5f7fa;*/
    /*border-color: #e4e7ed;*/
    color: #c0c4cc;
    text-align: center;
    cursor: pointer;
  }

  .title {
    background-color: #17B3A3;
    color: #fff;
    padding: 10px;
  }

  .mt10 {
    margin-top: 10px;
  }

  /* 提示框的样式 */
  .g6-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #545454;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }

  .flow-img {
    min-height: 937px;
  }

  .el-tabs--border-card > .el-tabs__content {
    height: 937px;
  }

  .p10 {
    padding: 10px;
  }
  /*.code{*/
  /*  height:800px;*/
  /*}*/
  /*.CodeMirror{*/
  /*  height:780px !important;*/
  /*}*/
  /*.CodeMirror-scroll{*/
  /*  height:780px !important;*/
  /*}*/

</style>

